{extend name="base" /}
{block name="content"}
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-tab layui-tab-brief">
            <ul class="layui-tab-title">
                <li><a href="{:url('admin/dp/article')}">文章管理</a></li>
                <li class="layui-this">编辑文章</li>
            </ul>
            <div class="layui-tab-content">
                <div class="layui-tab-item layui-show">
                    <form class="layui-form" action="{:url('admin/dp/edit_article')}" method="post">
                        <input type="hidden" name="id" value="{$record.id}">
                        <div class="layui-form-item">
                            <label class="layui-form-label">文章标题</label>
                            <div class="layui-input-block">
                                <input type="text" name="title" value="{$record.title}" required lay-verify="required" placeholder="请输入标题" class="layui-input">
                            </div>
                        </div>
       <input type="hidden" id="type" name="type" value="{$record.type}" />

<!-- 文章简介（link 与 content 都显示） -->
<div class="layui-form-item">
    <label class="layui-form-label">文章简介</label>
    <div class="layui-input-block">
        <textarea name="desc" placeholder="请输入文章简介，建议100字以内" class="layui-textarea">{$record.desc}</textarea>
    </div>
</div>

<!-- 微信链接编辑区域（仅当 type = link 显示） -->
<div class="layui-form-item link-section" style="display: none;">
    <label class="layui-form-label">微信文章链接</label>
    <div class="layui-input-block">
        <input type="url" name="link_url" value="{$record.link_url}" placeholder="请输入微信文章链接" class="layui-input" />
    </div>
</div>

<!-- 富文本编辑器（仅当 type = content 显示） -->
<div class="layui-form-item content-section" style="display: none;">
    <label class="layui-form-label">文章内容</label>
    <div class="layui-input-block">
        <div id="editor-wrapper">
            <div id="toolbar-container"></div>
            <div id="editor-container"></div>
        </div>
        <textarea name="content" id="content" style="display:none;">{$record.content}</textarea>
    </div>
</div>
                        <div class="layui-form-item">
                            <div class="layui-input-block">
                                <button class="layui-btn" lay-submit lay-filter="submitArticle">提交</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
{/block}
{block name="js"}
<!-- WangEditor V5 引入 -->

<link href="/public/assets/css/style.css" rel="stylesheet" />
<script src="/public/assets/js/index.js"></script>

<style>
#editor-wrapper {
    border: 1px solid #ccc;
    z-index: 100;
}
#toolbar-container {
    border-bottom: 1px solid #ccc;
}
#editor-container {
    height: 400px;
}
</style>

<script>
layui.use(['form'], function(){
    var form = layui.form;

    const { createEditor, createToolbar } = window.wangEditor;

    const editorConfig = {
        placeholder: '请输入文章内容...',
        onChange(editor) {
            const html = editor.getHtml();
            document.getElementById('content').value = html;
        },
        MENU_CONF: {
            uploadImage: {
                server: '/index/index/upload',  // 图片上传接口
                fieldName: 'file',
                customInsert(res, insertFn) {
                    if(res.code === 1){
                        insertFn('/public/'+res.data.url);
                    } else {
                        layer.msg('图片上传失败');
                    }
                }
            }
        }
    };
    const type = $('#type').val();
if (type === 'link') {
    $('.link-section').show();
} else if (type === 'content') {
    $('.content-section').show();
}
    const editor = createEditor({
        selector: '#editor-container',
        html: `{:html_entity_decode($record.content)}`,
        config: editorConfig,
        mode: 'default',
    });

    const toolbar = createToolbar({
        editor,
        selector: '#toolbar-container',
        mode: 'default',
    });

    // 表单提交
    form.on('submit(submitArticle)', function(data){
        const content = editor.getHtml();
        // if(!content || content === '<p><br></p>'){
        //     layer.msg('文章内容不能为空');
        //     return false;
        // }
        $('#content').val(content);

        $.post(data.form.action, $(data.form).serialize(), function(info){
            if(info.code === 1){
                layer.msg(info.msg);
                setTimeout(function(){
                    location.href = "{:url('admin/dp/article')}";
                }, 1000);
            } else {
                layer.msg(info.msg);
            }
        });

        return false;
    });
});
</script>
{/block}

